<template>
  <div class="u-page u-page-process-bg u-box">
    <!-- 标题 -->
    <div class="u-cl-white u-pt-20 u-pb-20">
      <div class="u-fz-26 u-font-bold">任务评价提醒</div>
      <div class="u-number u-pb-10 u-pt-10"></div>
    </div>

    <!-- 表单 -->
    <div
      class="rule-form rule-form-input-right u-box u-radius-lg u-shadow u-bcl-white"
    >
      <div style="margin-top: 20rpx">
        <p>
          恭喜您！<span style="color: red">{{ subject }}</span
          >已顺利完成交付，请您对本次参与工作任务的拍档综合能力进行评分，满分10分！
        </p>
      </div>

      <div style="margin-top: 40rpx; margin-bottom: 20rpx">
        <p>
          最佳拍档工作平台珍视每一位需求方的真实声音，平台优化离不开您的宝贵建议！
        </p>
      </div>

      <u-form ref="uForm" :model="form">
        <div>
          <u-form-item label-width="130" label="请选择" prop="AdviseRadio">
            <div class="u-flex u-row-right" style="width: 300rpx">
              <u-radio-group v-model="form.adviseRadio">
                <u-radio
                  @change="radioChange(item.value)"
                  v-for="(item, index) in list"
                  :key="item.value"
                  :name="item.value"
                  :disabled="item.disabled"
                >
                  {{ item.name }}
                </u-radio>
              </u-radio-group>
            </div>
          </u-form-item>

          <u-form-item
            label="您的建议"
            v-show="form.adviseRadioTag"
            label-position="top"
            prop="form.Advise"
            :border-bottom="false"
          >
            <u-input
              type="textarea"
              placeholder="请描述您的建议，限200字。"
              maxlength="200"
              height="150"
              v-model="form.advise"
            ></u-input>
          </u-form-item>
        </div>
      </u-form>

      <!-- 按钮 -->
      <div>
        <div style="margin-top: 40rpx">
          <u-button
            type="primary"
            :disabled="isClick"
            shape="circle"
            @click="submit"
          >
            提交
          </u-button>
        </div>
      </div>

      <div>
        <div style="margin-top: 20rpx">
          <u-button
            type="info"
            :disabled="isClick"
            shape="circle"
            @click="goBack"
          >
            关闭
          </u-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        adviseRadio: "",
        adviseRadioTag: false,
      },
      list: [
        {
          value: "目前没有建议",
          name: "目前没有建议",
          checked: false,
          disabled: false,
        },
        {
          value: "是的，有一些建议",
          name: "是的，有一些建议",
          checked: false,
          disabled: false,
        },
      ],
      subject: "",
      taskNumber: "",
      isClick: false, // 提交按钮是否可点击，默认可点击
    };
  },

  onLoad(options) {
    this.taskNumber = options.taskNumber;

    //未登录跳转到登录页面
    const loginRes = this.checkLogin();
    if (!loginRes) {
      return false;
    }
  },

  mounted() {
    this.initFormData();
  },

  onUnload() {},

  onReady() {},

  methods: {
    /**
     * 初始化表单数据
     */
    async initFormData() {
      try {
        this.isClick = true;
        const result = await this.$u.api.unifyMiniRestGet({
          systemid: "meily",
          url: "/expert/job/" + this.taskNumber,
          loading: false,
        });
        if (result.code === "200") {
          const { data } = result;
          this.subject = data.subject;
          this.form.advise = data.advise;
          this.form.adviseRadio = data.adviseRadio;
          this.form.adviseRadioTag =
            this.form.adviseRadio === "是的，有一些建议";
        }
      } catch (error) {
        console.error(error);
      } finally {
        this.isClick = false;
      }
    },

    /**
     * 提交流程
     */
    async submit() {
      // 显示 loading 提示框
      uni.showLoading({
        mask: true,
      });
      // 设置按钮为不可点击
      this.isClick = true;
      const userInfo = uni.getStorageSync("userInfo");
      let result = await this.$u.api.unifyMiniRest({
        systemid: "meily",
        url: "/expert/job/evaluate",
        createUser: userInfo.userId,
        taskNum: this.taskNumber,
        loading: false, // 默认发起请求会有一个全局的Loading，设置false可去掉
      });
      if (result.code === "200") {
        uni.reLaunch({
          url: "/pages_private_scene1/ExpertCooperate/common/result?mode=9",
        });
        uni.hideLoading();
        // 设置按钮为可点击
        this.isClick = false;
      } else {
        this.$u.toast(result.msg);
        this.isClick = false;
      }
    },

    /**
     * 按钮事件
     */
    async radioChange(value) {
      if (value == "目前没有建议") {
        this.form.adviseRadioTag = false;
      }
      if (value == "是的，有一些建议") {
        this.form.adviseRadioTag = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  padding: 20 rpx 20 rpx;
}

.title {
  font-size: 48 rpx;
  padding-bottom: 15 rpx;
  border-bottom: 5 rpx solid #bbb;
}

.wrap {
  padding: 30 rpx;
}

.badge-button {
  padding: 4 rpx 6 rpx;
  background-color: $u-type-error;
  color: #fff;
  border-radius: 10 rpx;
  font-size: 22 rpx;
  line-height: 1;
}
</style>
